<template>
  <Modal v-model="showAccountNumModal" draggable title="成员信息" width="650">
    <Table
      :loading="bloc.loading"
      :columns="columns"
      highlight-row
      :data="bloc.paged.items"
    >
      <slot name="footer" slot="footer">
        <div style="text-align: center">
          <Page
            show-elevator
            show-total
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="val=>bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="val=>bloc.load(bloc.paged.pageIndex, val)"
          />
        </div>
      </slot>
    </Table>
    <div slot="footer">
      <Button style="width: 56px;height: 32px;" @click="modalCancel">取消</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
  import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
  import {Loading} from '@/base/Loading';
  import {AccountNumBloc} from '@/view/role/bloc/AccountNumBloc';
  import {formatDate} from '@/base/util/Dates';

  const columns = (bloc: AccountNumBloc) => [
    {
      title: '姓名',
      key: 'userName',
      align: 'center'
    },
    {
      title: '邮箱',
      key: 'email',
      align: 'center'
    },
    {
      title: '手机',
      key: 'phone',
      align: 'center'
    },
    {
      title: '添加时间',
      render: (h: any, params: any) => {
        return h('span', {
          domProps: {
            innerText: formatDate(new Date(params.row.registerDate), 'yyyy-MM-dd hh:mm:ss')
          }
        });
      },
      width: 180,
      align: 'center'
    },
    {
      title: '最后登录',
      render: (h: any, params: any) => {
        return h('span', {
          domProps: {
            innerText: formatDate(new Date(params.row.loginDate), 'yyyy-MM-dd hh:mm:ss')
          }
        });
      },
      width: 180,
      align: 'center'
    }
  ];
  @Component
  export default class FormRoleModal extends Vue {
    @Prop({type: Boolean})
    readonly showAccountNumModal!: boolean;
    @Prop({type: Number})
    readonly idx!: number;

    bloc: AccountNumBloc = new AccountNumBloc();
    columns = columns(this.bloc);
    btnload = new Loading();

    modalCancel() {
      this.$emit('closeModal');
      this.$router.push({path: `/role`});
    }

    @Watch('showAccountNumModal')
    nameChanged(newVal: string, oldVal: string) {
      // if (this.idx && this.showAccountNumModal) this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.idx);
      if (this.showAccountNumModal) this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.idx);
    }
  }
</script>

<style lang="less" scoped>
</style>
